<template>
    <var-app-bar title="Notice">
        <template #left>
            <router-link to="/my/profile2">
                <var-button color="transparent" text-color="#fff" round text>
                    <var-icon name="chevron-left" :size="24" />
                </var-button>
            </router-link>

        </template>
        
    </var-app-bar>
    <var-card
    title="About the organization booking"
    subtitle=""
    src="https://fitzone.work/img/gym.jpg"
    description="At present, the APP only supports individual reservation facilities. If you need group reservation, please contact the staff offline or send email to the official email address to make reservation."
    ripple
  />
</template>

<script>
import { useUserStore } from '@/stores/user';
//0 ：成功 1：Orders made earlier than today cannot be cancelled!
const userStore = useUserStore();
export default {
    name: 'booking',
    data() {
        return {
            order_list: [],
            loading: true,
        }
    },
    created() {
        axios
            .get('https://fitzone.work:8080/orderAll')
            .then(res => {
                this.loading = false
                console.log(res.data);
                this.order_list = res.data;
                console.log(res.data)
                this.order_list = this.order_list.filter(item => item.user_name == userStore.nickName);
                console.log(userStore.nickName)
                console.log(this.order_list[0])
            })
            .catch(err => {
                console.error(err);
            })
    }
}
</script>
<script setup>
import { ref, computed, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { NavBar, Tabbar, TabbarItem } from "vant";
import { useSettingStore } from "@/stores/setting";
import NavBarConfig from '@/router/navbar.config'
import { ElContainer, ElHeader, ElMain, ElFooter } from 'element-plus'
import { Snackbar } from '@varlet/ui'
import { StyleProvider, Themes } from '@varlet/ui';
import axios from 'axios';
StyleProvider(Themes.dark)


const show = ref(false);
const message = {
    text: '',
}
const showList = reactive({
    id: Number,
    userName: '',
    orderName: '',
    orderId: '',
    orderTime: '',
    price: '',
})
const route = useRoute();
const router = useRouter();
const settingStore = useSettingStore();
function deleteDialog(id) {
    console.log(id)
    axios({
        method: 'get',
        baseURL: 'https://fitzone.work:8080/delete_order_by_user',
        params: {
            id: id
        }
    }).then(res => {
        show.value = true
        console.log(res.data)
        if (res.data == 0) {
            Snackbar.success('Booking was changed successfully!')
            show.value = false
            location.reload()
        }
        else {
            message.text = 'Orders made earlier than today cannot be cancelled!'
        }
    }).catch(err => {
        show.value = true
        console.log(err)
        message.text = 'Error!'
    })
}
function showBook(item) {
    show.value = true
    showList.id = item.id
    showList.userName = item.user_name
    showList.orderId = item.order_id
    showList.orderName = item.order_name
    showList.orderTime = item.order_time
    showList.price = item.price
}
</script>
<style>
.footer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 50px;
    z-index: 9999;
}
</style>
